<template>
  <van-list
    v-model:loading="loading"
    v-if="list.length"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <template #default>
      <div class="list-item" v-for="item in list" :key="item.key" @click="showItem(item)">
        <div class="icon">
          <van-icon
            size="20"
            :name="name === 'notice' ? 'bell' : 'notes'"
            :color="name === 'notice' ? '#47d4b5' : '#fec44b'"
            :dot="item.status === 0"
          />
        </div>
        <div class="info">
          <div class="top">
            <div class="title">{{ formatStr(item.title) }}</div>
            <div class="date">{{ item.date }}</div>
          </div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </template>
  </van-list>
  <van-pull-refresh v-else v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
    <van-empty description="暂无消息">
      <template #image>
        <img src="../../../assets/image/empty.png" alt="" style="width: 160px; height: auto" />
      </template>
    </van-empty>
  </van-pull-refresh>

  <van-action-sheet v-model:show="sheetVisible" :close-on-click-overlay="false">
    <div class="details">
      <h4>{{ currentItem?.title }}</h4>
      <p class="details-content">{{ currentItem?.content }}</p>
      <img src="../../../assets/image/huodong.png" alt="" />
      <h5>小标题</h5>
      <p class="details-content">此外，对于所有贡献的用户</p>
    </div>
    <button class="del-btn" @click="remove(currentItem!.key)">删除</button>
    <button class="confirm-btn" @click="confirm">确定</button>
  </van-action-sheet>
  <Toast ref="toastRef"></Toast>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import Toast from '@/components/Toast.vue'
import { MessageType, MessageItem } from '../type'
import useMessageStore from '@/store/message'

const props = defineProps<{
  name: MessageType
}>()

const messageStore = useMessageStore()
const list = computed(() => messageStore[`${props.name}List`])

const loading = ref(false)
const finished = ref(false)
const sheetVisible = ref(false)
const isLoading = ref(false)
const toastRef = ref<InstanceType<typeof Toast>>()

const currentItem = ref<MessageItem>()
const showItem = (item: MessageItem) => {
  sheetVisible.value = true
  messageStore.updateStatus(props.name, item.key)
  currentItem.value = item
}

const confirm = () => {
  sheetVisible.value = false
  if (props.name === 'order') return
  toastRef.value?.showToast({
    message: '恭喜获得20个租币',
    description: '阅读信息',
    money: 20
  })
}

const remove = (key: string) => {
  showConfirmDialog({
    message: '是否确认要删除已读通知'
  }).then(() => {
    messageStore.removeState(props.name, key)
  })

  sheetVisible.value = false
}

const onLoad = async () => {
  await messageStore.getList(props.name, 5)
  loading.value = false
  if (list.value.length >= 20) {
    finished.value = true
  }
}

const onRefresh = async () => {
  await messageStore.getList(props.name, 5)
  isLoading.value = false
}

const formatStr = (str: string) => {
  return str.length > 12 ? str.substring(0, 12) + '...' : str
}
</script>

<style scoped lang="less">
.list-item {
  width: 100%;
  height: 70px;
  padding: 15px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #dcdee0;
  display: flex;

  .icon {
    width: 30px;
    margin-right: 10px;
  }
  .info {
    flex: 1;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .title {
        font-size: 16px;
        color: #333;
      }

      .date {
        font-size: 13px;
        color: #999;
      }
    }

    .content {
      font-size: 13px;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: calc(100vw - 60px);
    }
  }
}

.details {
  padding: 20px 10px;
  img {
    width: 100%;
  }
  .details-content {
    color: #999;
    font-size: 12px;
  }
}
h4,
h5 {
  margin: 10px 0;
}

.del-btn,
.confirm-btn {
  height: 50px;
  border: none;
  padding: 0;
}
.del-btn {
  width: 30%;
  background-color: #f5f5f5;
  color: #bdbdbd;
}
.confirm-btn {
  width: 70%;
  background-color: #01c9be;
  color: #fff;
}

.toast-message {
  width: 80vw;
  display: flex;
  align-items: center;

  .toast-icon img {
    width: 30px;
  }
  .toast-icon,
  .num {
    flex: 1;
  }

  .text {
    width: 60%;
    text-align: left;

    .content2 {
      font-size: 12px;
      color: #c2c2c2;
    }
  }
}

.van-empty__image {
  width: 180px;
}
</style>
